<template>
  <div v-if="listAuth">
    <page-header
      :title="$t('m.agency_Transaction_records')"
      :has-return="false"
    >
      <el-button type="primary" @click="exportForm" v-if="exportsAuth">{{
        $t('m.exports')
      }}</el-button>
    </page-header>

    <div class="container">
      <div class="box_index">
        <!-- 搜索栏 -->
        <search-bar :options="searchBarOptions" />

        <!--分割线-->
        <div class="line"></div>

        <!-- 表格栏 -->
        <div class="table-box">
          <!--tab栏-->
          <div class="el_table_div" style="padding:10px 0 0;">
            <el-tabs v-model="activeName" @tab-click="switchTab">
              <el-tab-pane
                v-for="(item, index) in optionsDealType"
                :key="index"
                :name="String(item.value)"
                v-if="!item.disabled"
                :label="item.label"
              >
              </el-tab-pane>
            </el-tabs>
          </div>
          <!--表格-->
          <fast-table
            :options="fastTableOptions"
            :data="page.records"
            ref="table1"
          />
          <!-- 分页 -->
          <pagination
            :total="page.total"
            :current="page.current"
            :size="page.size"
            @changePageSize="changePageSize"
            @changePageNum="changePageNum"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import FastTable from '@/components/fast-table.vue'
import SearchBar from '@/components/search-bar.vue'
import pagination from '@/components/pagination.vue'
import page from '@/mixins/page'

export default {
  components: { FastTable, SearchBar, pagination },
  mixins: [page],
  data () {
    return {
      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.Order_List_OrderID'),
            prop: 'orderNo',
            formatter: row => this.$format.strFormat(row.orderNo)
          },
          {
            label: this.$t('m.User_ID'),
            prop: 'ucode',
            formatter: row => this.$format.strFormat(row.ucode)
          },
          {
            label: this.$t('m.Users_Details_Type'),
            prop: 'type',
            formatter: row =>
              this.$format.strFormat(
                this.$format.stateFormat(row.type, this.optionsDealType)
              )
          },
          {
            label: this.$t('m.settingPaymentMethod'),
            prop: 'paymentMethod',
            formatter: row => this.$format.strFormat(
                this.$format.stateFormat(
                  row.paymentMethod,
                  this.optionsPaymentMethod
                )
            )
          },
          {
            label: this.$t('m.thirdPartyTransactionOrder'),
            prop: 'transactionId',
            formatter: row => this.$format.strFormat(row.transactionId)
          },
          {
            label: this.$t('m.Users_Details_Amount'),
            prop: 'amount',
            formatter: row => this.$format.amountFormat(row.amount)
          },
          {
            label: this.$t('m.Finance_Transaction_date'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          }
        ]
      },

      params: {
        //类型：1-租借交易记录 2-押金记录
        type: '',
        //交易类型
        dealType: '',
        rangeTime: '',
        //支付方式
        paymentMethod: ''
      },
      activeName: '',

      // 流水类型：1-租借 2-租金退款 3-会员 4-会员退款 5-押金 6-押金退款 7-罚金 8-罚金退款 9-添加卡 10-添加卡退款 11-优惠券 12-优惠券退款
      optionsDealType: [
        { value: '', label: this.$t('m.all') },
        {
          value: 1,
          disabled: false,
          label: this.$t('m.Transaction_Type_Rental')
        },
        { value: 2, disabled: false, label: this.$t('m.Users_Rental_refund') },
        // {
        //   value: 5,
        //   disabled: this.getUserType() == 2,
        //   label: this.$t('m.Users_Deapoit')
        // },
        // {
        //   value: 6,
        //   disabled: this.getUserType() == 2,
        //   label: this.$t('m.Deposit_refunded')
        // }
      ],
      // 支付方式
      optionsPaymentMethod: [{ value: '', label: this.$t('m.all') }].concat(
        this.$dict.transfer.paymentMethod
      ),
      exportSearch: '',
      listAuth: this.permissionsId(62), // 列表
      exportsAuth: this.permissionsId(188) // 导出操作
    }
  },
  watch: {
    'params.dealType' (newval, oldval) {
      // 代码实现
      // console.log(newval);
      if (newval == '' || newval == 0) {
        this.activeName = '0'
      }
    }
  },
  created () {
    if (!this.listAuth) {
      return
    }
    this.getSearchBar()
    this.getPage()
  },
  methods: {
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: '',
            type: 'input',
            prop: 'search',
            placeholder: [
              this.$t('m.Order_List_OrderID'),
              this.$t('m.User_ID')
            ].join(' / ')
          },
          {
            value: '',
            type: 'datePicker',
            prop: 'rangeTime',
            label: this.$t('m.Finance_Transaction_date')
          }
          // {
          //   value: '',
          //   type: 'select',
          //   prop: 'paymentMethod',
          //   label: this.$t('m.Payment_Method'),
          //   options: this.optionsPaymentMethod
          // }
        ]
      }
    },
    getPage () {
      this.$api.transfer.getPage(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    },

    // 切换tab
    switchTab (tab) {
      // console.log('switchTab', tab.name)
      this.params.dealType = tab.name == 0 ? '' : tab.name
      this.page = this.$options.data.call(this).page
      this.getPage()
    },

    //导出表格
    exportForm () {
      this.exportSearch = { ...this.params, variableTitleHead: [] }
      this.fastTableOptions.columns.forEach(item => {
        this.exportSearch.variableTitleHead.push(item.label)
      })
      this.exportSearch.variableTitleHead = this.exportSearch.variableTitleHead.toString()
      this.exportTransfer(this.exportSearch)
    },

    //用户交易记录
    exportTransfer (item) {
      this.$openLoading()
      this.$api.transfer.getExportTransfers(item).then(res => {
        window.downExcel(res, this.$t('m.agency_Transaction_records'))
        this.$closeLoading()
      })
    }
  }
}
</script>
<style scoped lang="scss"></style>
